<template>
    <view class="account-manage">
        <!-- 顶部导航 -->
        <u-navbar title="支付类型管理" :autoBack="true"></u-navbar>

        <!-- 列表（可滚动） -->
        <scroll-view class="list-box" scroll-y>
            <u-empty v-if="!accountList.length" mode="data" text="暂无支付类型，点击下方“新增支付类型账户”" />
            <u-swipe-action :autoClose="true" v-else>
                <u-swipe-action-item v-for="item in accountList" :key="item.id" :options="swipeOptions"
                    @click="onSwipeOptionClick($event, item)">
                    <view class="swipe-item u-border-top u-border-bottom u-item">
                        <view>
                            <view class="row">
                                <text class="mini-label">支付类型：</text>
                                <text class="val name">{{ item.name }}</text>
                            </view>
                            <view class="row">
                                <text class="mini-label">创建时间：</text>
                                <text class="val time">{{ formatDate(item.createTime || item.create_time) }}</text>
                            </view>
                        </view>
                        <view>
                            <span style="color: #3c9cff;" @click="makeSortType(item)">上移</span>
                            <span style="color: #3c9cff;margin-left: 20rpx;" @click="makeSortType(item, 'down')">下移</span>
                        </view>
                    </view>
                </u-swipe-action-item>
            </u-swipe-action>
        </scroll-view>

        <!-- 底部固定操作区 -->
        <view class="add-fixed">
            <u-button type="primary" icon="plus" shape="circle" @click="addItem">
                新增支付类型账户
            </u-button>
        </view>

        <!-- 新增/编辑弹窗 -->
        <u-popup :show="formShow" mode="center" @close="formShow = false">
            <view class="popup-box">
                <u-form :model="form">
                    <u-form-item label="支付类型">
                        <u-input v-model="form.name" placeholder="请输入支付类型"></u-input>
                    </u-form-item>
                </u-form>
                <view class="popup-actions">
                    <u-button type="primary" @click="submitForm">确定</u-button>
                    <u-button @click="formShow = false">取消</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { getRecordTypesDictionary, createOrEdit, deleteTypeById, sortType } from '@/api/financeRecordType'
export default {
    data() {
        return {
            accountList: [],
            formShow: false,
            form: { id: null, account: '', name: '', money: '' },
            swipeOptions: [
                { text: '编辑', style: { backgroundColor: '#3c9cff' } },
                { text: '删除', style: { backgroundColor: '#f56c6c' } }
            ]
        }
    },
    onLoad() {
        this.getList()
    },
    methods: {
        // 拉取账户列表
        getList() {
            getRecordTypesDictionary().then(res => {
                this.accountList = res
            })
        },
        // 新增
        addItem() {
            this.form = { id: null, account: '', name: '', money: '' }
            this.formShow = true
        },
        // 左滑操作
        onSwipeOptionClick({ index }, item) {
            if (index === 0) this.editItem(item)
            if (index === 1) this.deleteItem(item.id)
        },
        editItem(item) {
            this.form = { id: item.id, account: item.account, name: item.name, money: item.money }
            this.formShow = true
        },
        deleteItem(id) {
            uni.showModal({
                title: '提示',
                content: '确认删除该支付类型吗？',
                success: (res) => {
                    if (res.confirm) {
                        deleteTypeById({ id: id }).then(res => {
                            this.getList()
                        });
                    }
                }
            })
        },
        submitForm() {
            if (!this.form.name) {
                uni.showToast({ title: '请填写完整信息', icon: 'none' })
                return
            }
            createOrEdit(this.form).then(res => {
                this.getList()
                this.formShow = false
            })
        },
        makeSortType(item, upDown) {
            let params = { id: item.id }
            if (upDown == 'down') {
                params.upDown = 'down'
            }
            sortType(params).then(res => {
                this.getList()
            })
        },
        formatDate(val) {
            if (!val) return ''
            try {
                const d = typeof val === 'number' ? new Date(val) : new Date(String(val).replace(/-/g, '/'))
                const pad = n => (n < 10 ? '0' + n : n)
                return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
            } catch (e) {
                return String(val)
            }
        }
    }
}
</script>

<style scoped>
.account-manage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
}

.list-box {
    flex: 1;
    padding: 16rpx 20rpx 160rpx;
    box-sizing: border-box;
}

.swipe-item {
    padding: 22rpx 20rpx;
    background: #fff;
    /* border-radius: 16rpx;
    margin-bottom: 16rpx; */
}

.row {
    display: flex;
    align-items: baseline;
    margin-bottom: 8rpx;
}

.row:last-child {
    margin-bottom: 0;
}

.mini-label {
    font-size: 24rpx;
    color: #888;
    margin-right: 8rpx;
}

.val {
    font-size: 28rpx;
    color: #333;
}

.name {
    font-weight: 600;
    font-size: 30rpx;
}

.account {
    font-size: 28rpx;
    color: #555;
}

.money-row {
    margin: 12rpx 0;
}

.money {
    font-size: 36rpx;
    font-weight: bold;
    color: #2ecc71;
    /* 余额显眼：绿色 */
}

.time {
    color: #999;
    font-size: 26rpx;
}

.add-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16rpx 20rpx calc(16rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
    /* background: #fff; */
    box-shadow: 0 -6rpx 20rpx rgba(0, 0, 0, 0.06);
    z-index: 99;
}

.popup-box {
    padding: 30rpx;
    width: 620rpx;
    box-sizing: border-box;
}

.popup-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
}

.u-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
